<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/my-css.css" />
    <script type="text/javascript" src="/js/my-js.js" ></script>
    <script type="text/javascript" src="/js/jquery.cookie.js" ></script>
    <script type="text/javascript" src="/js/vue.min.js" ></script>
    <title>Java学习网</title>
    <style type="text/css">
        .input-font-size {
            font-size: 14px;
        }
        .center {
            margin-top: 10px;
            position: relative;
            left: 50%;
            width: 360px;
            text-align: center;
            transform: translateX(-50%);
            border-radius: 20px;
            background-color: white;
            padding: 10px 15px 30px 15px;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <script type="text/javascript">moralLoad("#header", "/html/header.html")</script>
    <div class="container">
        <div class="row panel panel-default center">
            <h3><b>登录到Java学习网</b></h3>
            <form class="form-horizontal" style="margin-top: 20px;" id="loginForm">
                <div class="col-xs-offset-1 col-xs-10 input-group">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                    </span>
                    <input type="text" id="account" class="input-lg form-control input-font-size" name="account" placeholder="账号" required="required">
                </div><br />
                <div class="col-xs-offset-1 col-xs-10 input-group">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                    </span>
                    <input type="password" id="password" class="input-lg form-control input-font-size" name="password" placeholder="密码" required="required">
                </div><br />
                <div class="col-xs-offset-1 col-xs-10 input-group">
                    <input type="text" id="captcha" class="input-lg form-control input-font-size" name="captcha" placeholder="验证码" required="required">
                    <span class="input-group-btn"  title="点击刷新验证码" onclick="updateCaptcha()" style="cursor:pointer;">
                        <img id="captchaImg" src="/captcha" alt="验证码图片">
                    </span>
                </div><br />
                <div class="col-xs-offset-1 col-xs-10 input-group">
                    <input type="checkbox" class="pull-left" name="remeberMe" id="remeberMe" value="true" v-model="isRemeber" />
                    <label for="remeberMe" class="pull-left">记住我的登录状态</label>
                    <a href="/" class="pull-right">忘记密码</a>
                </div>
                <div style="margin: 20px 0 20px 0;">
                    <p id="message" class="text-danger" style="visibility: hidden;">!</p>
                </div>
                <div class="col-xs-offset-1 col-xs-10 input-group">
                    <button type="submit" class="pull-left col-xs-5 btn btn-success">
                                                                   登录
                    </button>
                    <a href="register.html" class="pull-right col-xs-5 btn btn-warning">
                                                                   注册
                    </a>
                </div>
            </form>
        </div>
    </div>
</body>
<script type="text/javascript">
    var inputAccount = $("#account");
    var inputPassword = $("#password");
    var inputCaptcha = $("#captcha");
    $("#loginForm").submit(function() {
        var data = {
            account: inputAccount.val(),
            password: inputPassword.val(),
            captcha: inputCaptcha.val()
        };
        if (!checkLength(data.account, 6, 20) || !checkLength(data.password, 6, 20)) {
            showMessage("账号或密码错误！");
            refresh();
        } else if (!checkLength(data.captcha, 4, 4)) {
            showMessage("验证码输入错误！");
            refresh();
        } else {
        	myAjax({
        		type: 'post',
        		url: "/sessions",
        		data: data,
        		success: function(data) {
        			$.cookie('userName', data.userName, {expires: 7});
                    showMessage("登陆成功！即将跳转");
                    setTimeout("window.location.href = '/courseCategorys';", 500);
        		}
        	}, refresh);
        }
        return false;
    });
    function refresh() {
        inputPassword.val("");
        inputCaptcha.val("");
        updateCaptcha();
    };
</script>
</html>